<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>块元素与内敛元素</title>

<style >

h1 {
 color: blue;
}

/*
display : inline 内联元素
block 块元素
inline-block: 既能在一行,又能支持宽高

*/



/*把span转换为 block元素*/
.span_1 {
height: 100px;
border: solid red 20px;
display:block;
/*注意 :
display 是用来转换显示类型的,
但是不会改变标签本质

*/
}


/*内联模块*/
.ib {

display:inline-block;
background: red;
height: 100px;
}


/*---------翻页box----------------*/
.pagebox {

   background: lightGray;

}

.pagebox a {

border: 1px solid gray;
display: inline-block; /**/
background: white;
width: 17px;
height: 20px;
text-align: center;
text-decoration: none;
line-height:20px;

}

/*选中的 和鼠标经过的效果*/
.pagebox a:hover , .pagebox .active {
  color: white;
  background: blue;
}



.pagebox .pageBtn  {
width:60px;
}



</style>

  </head>

  <body>

<!--  -->
<h1>1.块元素</h1>

<p>特征</p>

<ol>
  <li>默认独占一行</li>
  <li>没指定宽高时,会撑开元素</li>
  <li>支持css所有属性</li>
</ol>


<!--inline -->
<h1>2.内联元素</h1>
<ol>
  <li>不独占一行</li>
  <li>不支持宽高</li>
  <li>不支持上下margin</li>
  <li>内敛元素代码换行会识别为空格</li>
</ol>
<em>hahah</em>
<strong>jsddshjdjh</strong>
<span>dsds</span>





<!-- 把span转成块元素 -->
<hr>
<h2>把span转成块元素 </h2>
<span class="span_1">assdsdss</span>
<span class="span_1">wewewew</span>




<!--inline-block -->
<h1>3.内联块(ie6/7不支持 inline-block)</h1>

<ol>
  <li>内联模块支持宽高</li>
  <li>没有宽高时,由内容决定</li>
  <li><strong>ie6/7不支持 inline-block,可以用'浮动'解决</strong></li>

</ol>

<div class="">

  <div class="ib">
dsdff
  </div>

  <div class="ib">
adfdfdfdfadfa
  </div>

</div>
<hr>


<!--  -->
<h1>翻页demo</h1>
<div id="pagebox" class="pagebox">
<a href="#pagebox" class="pageBtn" >上一页</a>
<a href="#pagebox">1</a>
<a href="#pagebox">2</a>
<a href="#pagebox" class="active">3</a>
<a href="#pagebox">4</a>
<a href="#pagebox">5</a>
<a href="http://www.baidu.com"  class="pageBtn">下一页</a>

</div>



  </body>
</html>
